<template>
    <view class="report_detail">
        <view class="preview">
            <image
                v-if="isImage"
                style="width: 750rpx"
                :src="previewItem.fileUrl"
                mode="widthFix"
                @tap="previewImage"
            />
            <!-- <web-view v-else :src="previewItem.fileUrl" style="width: 100%;height: 300rpx;" /> -->
            <u-button
                v-else
                text="预览文件"
                color="#588BF3"
                shape="circle"
                :customStyle="button1"
                @click="topreview"
            />
        </view>
        <view class="bottom">
            <u-button
                text="下载报告"
                color="#588BF3"
                shape="circle"
                :customStyle="button1"
                @click="download"
            />
            <!-- <button class="share" open-type="share">
        <u-icon
          label="分享"
          name="https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/12/4b2e35eb2e624fc590a0c60447437a4a.png"
          labelColor="#588BF3"
          labelPos="left"
        />
      </button> -->
        </view>
    </view>
</template>

<script>
import { reportBaseUrl } from "../../config/tendIdConfig";
export default {
    data() {
        return {
            platform: "",
            button1: {
                fontSize: "32rpx",
                color: "#333",
                width: "468rpx",
            },
            fileUrl: "",
            previewItem: {},
            reportCode: "",
            fileName: "",
        };
    },
    computed: {
        isImage() {
            // 判断文件类型是否为图片
            return this.fileUrl
                .toLowerCase()
                .match(/\.(jpg|jpeg|png|gif|bmp)$/);
        },
    },
    onLoad(options) {
        this.reportCode = options.reportCode;
        this.fileName = options.fileName;
    },
    onShow() {
        this.getDetail(this.reportCode);
    },
    methods: {
        download() {
            if (this.isImage) {
                this.downloadImage();
            } else {
                uni.setClipboardData({
                    data: this.fileUrl,
                    success() {
                        uni.showToast({
                            title: "已拷贝,请到浏览器下载",
                        });
                    },
                });
            }
        },
        downloadFile() {
            const fileUrl = this.fileUrl; // 替换成你的文件 URL
            uni.downloadFile({
                url: fileUrl,
                success: (res) => {
                    if (res.statusCode === 200) {
                        const filePath = res.tempFilePath;
                        this.saveFile(filePath);
                    }
                },
                fail: (err) => {
                    console.error("下载文件失败", err);
                },
            });
        },
        saveFile(filePath) {
            uni.saveFile({
                tempFilePath: filePath,
                success: (res) => {
                    const savedFilePath = res.savedFilePath;
                    console.log("文件已保存", savedFilePath);
                },
                fail: (err) => {
                    console.error("保存文件失败", err);
                },
            });
        },
        downloadImage() {
            const imageUrl = this.fileUrl; // 替换成你的图片 URL
            uni.downloadFile({
                url: imageUrl,
                success: (res) => {
                    if (res.statusCode === 200) {
                        const imagePath = res.tempFilePath;
                        this.saveImageToPhotosAlbum(imagePath);
                        uni.showToast({
                            title: "已保存到相册",
                        });
                    }
                },
                fail: (err) => {
                    console.error("下载图片失败", err);
                },
            });
        },
        saveImageToPhotosAlbum(imagePath) {
            uni.saveImageToPhotosAlbum({
                filePath: imagePath,
                success: () => {
                    console.log("图片已保存到相册");
                },
                fail: (err) => {
                    console.error("保存图片到相册失败", err);
                },
            });
        },
        onShareAppMessage(res) {
            //转发参数
            return {
                title: "报告",
                path: "/pages_my/health_records/index",
            };
        },
        topreview() {
            const that = this;
            uni.getSystemInfo({
                success: function (res) {
                    that.platform = res.platform;
                    if (res.platform === "ios") {
                        that.$u.route({
                            url: "/pages_my/webview/index",
                            params: {
                                previewUrl: that.previewItem.fileUrl,
                                title: that.previewItem.fileName,
                            },
                        });
                    } else {
                        uni.downloadFile({
                            url: that.previewItem.fileUrl,
                            success: function (res) {
                                var filePath = res.tempFilePath;
                                uni.openDocument({
                                    filePath: filePath,
                                    showMenu: true,
                                    success: function (res) {
                                        console.log("打开文档成功");
                                    },
                                    fail: function (error) {
                                        console.log("打开文档失败", error);
                                    },
                                });
                            },
                        });
                    }
                },
            });
        },
        previewImage() {
            uni.previewImage({
                current: this.fileUrl,
                urls: [this.fileUrl],
            });
        },
        getDetail(reportCode) {
            const that = this;
            uni.request({
                url: reportBaseUrl + "/web/order_report/reportDetail",
                method: "GET",
                header: {
                    H5accessToken: that.$store.state.reportToken,
                },
                data: {
                    reportCode,
                },
                success(result) {
                    if (result.data.code === 200) {
                        that.previewItem = that.fileName
                            ? result.data.data.fileList.filter(
                                  (item) => item.fileName === that.fileName
                              )[0]
                            : result.data.data.fileList.filter(
                                  (item) => item.reportCode === reportCode
                              )[0];
                        that.fileUrl = that.previewItem.fileUrl;
                    } else {
                        uni.showToast({
                            title: result.data.msg,
                            icon: "none",
                        });
                    }
                },
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.report_detail {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;

    .preview {
        width: 100%;
        flex: 1;
        display: flex;
        align-items: center;
    }

    .bottom {
        width: 100%;
        min-height: 136rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 32rpx;
        padding-bottom: 0;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
        border-top: 1px solid #e5e5e5;

        .share {
            width: 190rpx;
            height: 88rpx;
            border-radius: 50px;
            overflow: hidden;
            font-size: 32rpx;
            background-color: rgba(88, 139, 243, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
